<template>
  <BaseContainer :show="false">
    <!-- <QueryFilter
      :model="queryFields"
      :label-col="{ style: { width: '70px' } }"
      @submit="handleQueryData"
      @reset="resetQueryData"
    >
      <a-form-item name="name" label="关键词名称">
        <a-input placeholder="请输入关键词名称" v-model:value.trim="queryFields.name" allow-clear />
      </a-form-item>
    </QueryFilter> -->
    <!-- <Divider /> -->
    <table-toolbar title="折扣列表">
      <a-button type="primary" @click="handleCreate">
        <template #icon><plus-outlined /></template>
        新建
      </a-button>
    </table-toolbar>
    <a-table
      row-key="id"
      :loading="loading"
      :pagination="pagination"
      :columns="columns"
      :data-source="tableData"
      :scroll="{ x: 1000 }"
      @change="handleTableChange"
    >
      <!--  -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'createTime'">
          <!-- {{ formatDate(record.createTime) }} -->
        </template>
        <template v-if="column.key === 'bzLine'">
          <!-- {{ BlKeyMap[record.bzLine] }} -->
        </template>
        <template v-if="column.key === 'matchStyle'">
          <!-- {{ PatternKeyMap[record.matchStyle] }} 
               -->
        </template>
        <template v-if="column.key === 'operate'">
          <a-button type="primary" @click="handleEdit(record)">编辑</a-button>
          <a-popconfirm title="确定要删除吗？" @confirm="handleRemove(record)">
            <a-button class="delete-color ml-2" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <consumptioniiadd
      v-model:data="formFields"
      v-model:show="dialog.show"
      :mode="dialog.mode"
      :submitting="submitting"
      @on-submit="handleSubmit"
      @on-submits="handleSubmits"
    />
  </BaseContainer>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import TableToolbar from '@/components/table-toolbar/index.vue'
import getWordLib, { type WordLib } from '@/services/word-lib/getWordLib'
// import tallCostpageus, { type Params } from '@/services/account-management/tallCostpage'
import pageRenewConf, { type Params } from '@/services/promotion/pageRenewConf'
import { formatDate, toLabelValue } from '@/utils'
import updateWordLib from '@/services/word-lib/updateWordLib'
import tallCostdelus from '@/services/account-management/tallCostdel'
import deleteRenewConfs from '@/services/account-management/deleteRenewConf'
import consumptioniiadd from './components/renewptioniiadd.vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import BaseContainer from '@/components/base-container/index.vue'
import QueryFilter from '@/components/query-filter/index.vue'
import Divider from '@/components/divider/index.vue'
import { PatternEnum, PatternKeyMap } from '@/views/word-lib/interface'
import { Mode } from '@/core/interfaces/common'
import { BlKeyMap } from '@/core/mapper/platform'
import tallCostupdateus from '@/services/account-management/tallCostupdate'
import saveOrUpdateRenewConfs from '@/services/account-management/saveOrUpdateRenewConf'
const defaultQueryFields = () => ({
  name: '',
  matchStyle: PatternEnum.ALL
})

const defaultFormFields = () => ({
  id: undefined,
  name: '',
  matchStyle: undefined
})

const queryFields = reactive(defaultQueryFields())
const formFields = ref(defaultFormFields())

const dialog = reactive({
  mode: Mode.create,
  show: false
})

const pagination = reactive({
  pageNum: 1,
  pageSize: 15,
  total: 0
})

const matchPattern = ref(toLabelValue(PatternKeyMap))

const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '开始区间(≥)',
    dataIndex: 'startRate',
    key: 'startRate'
  },
  {
    title: '结束区间(<)',
    dataIndex: 'endRate',
    key: 'endRate'
  },
  {
    title: '折扣',
    dataIndex: 'discount',
    key: 'discount'
  },
  {
    title: '最后修改人',
    dataIndex: 'updateUserName',
    key: 'updateUserName'
  },
  {
    title: '最后修改时间',
    dataIndex: 'updateTime',
    key: 'updateTime'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    width: '170px'
  }
]

const tableData = ref<WordLib[]>([])
// const [, queryTableData, loading] = getWordLib()
const [, pageRenewConfFn, loading] = pageRenewConf()
const [, tallCostupdate] = tallCostupdateus()
// const [, submitWordLib, submitting] = updateWordLib()
// const [, deleteWordLib] = removeWordLib()
const [, deleteRenewConf] = deleteRenewConfs()
const [, saveOrUpdateRenewConf] = saveOrUpdateRenewConfs()
async function loadBusinessLine() {
  const [err, res] = await pageRenewConfFn({
    // name: queryFields.name,
    pageSize: pagination.pageSize,
    pageNum: pagination.pageNum
  })

  if (!err) {
    pagination.total = res.data.data.total
    tableData.value = res.data.data.list
  }
}

async function handleSubmit() {
  const [err] = await saveOrUpdateRenewConf(formFields.value)

  if (!err) {
    dialog.show = false
    loadBusinessLine()
  }
}

async function handleSubmits() {
  loadBusinessLine()
}
function handleTableChange(pag: { pageSize: number; current: number }) {
  pagination.pageSize = pag.pageSize
  pagination.pageNum = pag.current
  loadBusinessLine()
}

function handleQueryData() {
  pagination.pageSize = 15
  pagination.pageNum = 1
  loadBusinessLine()
}

function resetQueryData() {
  Object.assign(queryFields, defaultQueryFields())
  pagination.pageSize = 15
  pagination.pageNum = 1
  loadBusinessLine()
}
// 点击新增
function handleCreate() {
  dialog.show = true
  dialog.mode = Mode.create
  formFields.value = defaultFormFields()
}
// 点击编辑的值
function handleEdit(record: WordLib) {
  dialog.show = true
  dialog.mode = Mode.edit

  formFields.value = Object.assign(defaultFormFields(), record)
}
// 删除
async function handleRemove(record: WordLib) {
  const [err, res] = await deleteRenewConf({
    id: record.id
  })

  if (!err) {
    message.success(res.data.msg || '删除成功')
    await loadBusinessLine()
  } else {
    message.error(err.message || '删除失败，请稍候再试...')
  }
}
// 查询
onMounted(() => {
  loadBusinessLine()
})
</script>

<script lang="ts">
export default {
  name: 'WordLibrary'
}
</script>
